<!--
 * @Author: chenli 604089679@qq.com
 * @Date: 2023-08-03 18:58:54
 * @LastEditors: chenli 604089679@qq.com
 * @LastEditTime: 2023-08-07 11:24:58
 * @FilePath: \vue3\src\views\css\canvas.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <canvas id="canvas" ref="mycanRef" width="900" height="900"> </canvas>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref } from "vue";

let mycanRef = ref();

let initCanvas = () => {
  let mycan = document.getElementById("canvas") as HTMLCanvasElement;
  console.log("---", mycan);
  if (mycan.getContext) {
    //画矩形
    let ctx = mycan.getContext("2d");
    ctx!.fillStyle = "blue";
    ctx?.fillRect(300, 300, 100, 100);
    ctx?.clearRect(325, 325, 50, 50);
    ctx?.strokeRect(330, 330, 40, 40);

    //画线
    ctx.beginPath();
    ctx.moveTo(100, 100);
    // ctx.lineTo(150,200)
    // ctx.lineTo(50,200)
    ctx.bezierCurveTo(150, 250, 200, 300, 220, 310);
    ctx.quadraticCurveTo(150, 250, 20, 30);
    ctx.stroke();
    ctx.fill(); //自动填满

    //画圆弧
    ctx.beginPath();
    //顺时针
    // ctx.arc(300,300,50,Math.PI*0.5,Math.PI,false)
    // ctx.moveTo(200,400)
    // ctx.arc(200,400,50,Math.PI*0.5,Math.PI*1.5,false)
    // ctx.moveTo(300,500)
    // ctx.arc(300,500,50,Math.PI*0.5,Math.PI*2,false)
    // ctx.moveTo(300,600)
    // ctx.arc(300,600,50,Math.PI*0.5,Math.PI*2.5,false)
    // ctx.moveTo(400,600)
    // ctx.arc(400,600,50,Math.PI*0.5,Math.PI*3,false)
    //逆时针
    ctx.arc(300, 300, 50, Math.PI * 0.5, Math.PI, true);
    ctx.moveTo(200, 400);
    ctx.arc(200, 400, 50, Math.PI * 0.5, Math.PI * 1.5, true);
    ctx.moveTo(300, 500);
    ctx.arc(300, 500, 50, Math.PI * 0.5, Math.PI * 2, true);
    ctx.moveTo(300, 600);
    ctx.arc(300, 600, 50, Math.PI * 0.5, Math.PI * 2.5, true);
    ctx.moveTo(400, 600);
    ctx.arc(400, 600, 50, Math.PI * 0.5, Math.PI * 3, true);
    ctx.stroke();
    // ctx.fill();

    //写字
    ctx.font = "50px serif";
    ctx.fillText("Hello world", 50, 90);

    //
    let p1 = new Path2D();
    p1.rect(0, 0, 100, 150);

    // Create second path and add a rectangle
    let p2 = new Path2D();
    p2.rect(0, 0, 100, 75);
    ctx.stroke();

    const gradient = ctx.createLinearGradient(100, 100, 100, 300);
    gradient.addColorStop(0, "green");
    gradient.addColorStop(0.5, "blue");
    gradient.addColorStop(0.75, "red");
    // Set the fill style and draw a rectangle
    ctx.fillStyle = gradient;
    ctx.fillRect(100, 100, 200, 200);


    ctx.fillRect(0, 0, 150, 150); // 使用默认设置绘制一个矩形
  ctx.save(); // 保存默认状态

  ctx.fillStyle = "#09F"; // 在原有配置基础上对颜色做改变
  ctx.fillRect(15, 15, 120, 120); // 使用新的设置绘制一个矩形

  ctx.save(); // 保存当前状态
  ctx.fillStyle = "#FFF"; // 再次改变颜色配置
  ctx.globalAlpha = 0.5;
  ctx.fillRect(30, 30, 90, 90); // 使用新的配置绘制一个矩形

  ctx.restore(); // 重新加载之前的颜色状态
  ctx.fillRect(45, 45, 60, 60); // 使用上一次的配置绘制一个矩形

  ctx.restore(); // 加载默认颜色配置
  ctx.fillRect(60, 60, 30, 30);
  }
};

onMounted(() => {
  nextTick(() => {
    initCanvas();
  });
});
</script>

<style scoped></style>
